{% extends 'base.html' %}

{% block title %}{{ coach.real_name }} - 教练详情 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}教练详情{% endblock %}

{% block extra_css %}
<style>
    .detail-container {
        display: grid;
        grid-template-columns: 350px 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .coach-profile {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        height: fit-content;
        position: sticky;
        top: 2rem;
    }

    .coach-avatar-large {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        overflow: hidden;
        border: 4px solid #e9ecef;
    }

    .coach-avatar-large img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .coach-avatar-large i {
        font-size: 3rem;
        color: #6c757d;
    }

    .coach-name {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .coach-level-badge {
        display: block;
        text-align: center;
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-weight: 600;
        margin-bottom: 1.5rem;
    }

    .level-senior {
        background: #e7f3ff;
        color: #0056b3;
    }

    .level-middle {
        background: #fff3cd;
        color: #856404;
    }

    .level-junior {
        background: #d4edda;
        color: #155724;
    }

    .coach-info-item {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        padding: 0.75rem;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .coach-info-item i {
        width: 20px;
        margin-right: 0.75rem;
        color: #007bff;
    }

    .coach-info-item .label {
        font-weight: 600;
        color: #495057;
        min-width: 60px;
        margin-right: 1rem;
    }

    .coach-info-item .value {
        color: #6c757d;
        flex: 1;
    }

    .status-badge {
        padding: 0.375rem 0.75rem;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .status-active {
        background: #d4edda;
        color: #155724;
    }

    .status-pending {
        background: #fff3cd;
        color: #856404;
    }

    .status-inactive {
        background: #f8d7da;
        color: #721c24;
    }

    .rate-display {
        font-size: 1.5rem;
        font-weight: 700;
        color: #28a745;
        text-align: center;
        margin: 1rem 0;
    }

    .content-area {
        display: grid;
        gap: 2rem;
    }

    .content-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .card-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
    }

    .card-title i {
        margin-right: 0.75rem;
        color: #007bff;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border-left: 4px solid;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .stat-card.students { border-left-color: #007bff; }
    .stat-card.revenue { border-left-color: #28a745; }
    .stat-card.hours { border-left-color: #17a2b8; }
    .stat-card.rating { border-left-color: #ffc107; }

    .stat-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .stat-icon.students { color: #007bff; }
    .stat-icon.revenue { color: #28a745; }
    .stat-icon.hours { color: #17a2b8; }
    .stat-icon.rating { color: #ffc107; }

    .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-sublabel {
        color: #6c757d;
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    .bio-text {
        line-height: 1.6;
        color: #495057;
        margin-bottom: 1.5rem;
    }

    .experience-text {
        line-height: 1.6;
        color: #495057;
        white-space: pre-wrap;
    }

    .students-list {
        display: grid;
        gap: 1rem;
    }

    .student-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .student-item:hover {
        background: #e9ecef;
    }

    .student-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #dee2e6;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
    }

    .student-info {
        flex: 1;
    }

    .student-name {
        font-weight: 600;
        color: #2c3e50;
        margin: 0;
    }

    .student-meta {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .relation-status {
        padding: 0.25rem 0.75rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .relation-approved {
        background: #d4edda;
        color: #155724;
    }

    .relation-pending {
        background: #fff3cd;
        color: #856404;
    }

    .reservation-list {
        display: grid;
        gap: 1rem;
    }

    .reservation-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #e9ecef;
    }

    .reservation-item.completed {
        border-left-color: #28a745;
    }

    .reservation-item.confirmed {
        border-left-color: #007bff;
    }

    .reservation-item.pending {
        border-left-color: #ffc107;
    }

    .reservation-item.cancelled {
        border-left-color: #dc3545;
    }

    .reservation-date {
        font-weight: 600;
        color: #2c3e50;
        min-width: 120px;
    }

    .reservation-details {
        flex: 1;
        margin: 0 1rem;
    }

    .reservation-student {
        font-weight: 500;
        color: #495057;
    }

    .reservation-time {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    .reservation-status {
        padding: 0.25rem 0.75rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 600;
        min-width: 80px;
        text-align: center;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 2px solid #f8f9fa;
    }

    .btn-action {
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    @media (max-width: 992px) {
        .detail-container {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        .coach-profile {
            position: static;
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }

        .action-buttons {
            flex-direction: column;
        }

        .btn-action {
            width: 100%;
            text-align: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="detail-container">
        <!-- 教练档案 -->
        <div class="coach-profile">
            <div class="coach-avatar-large">
                {% if coach.photo_url %}
                <img src="{{ coach.photo_url }}" alt="{{ coach.real_name }}">
                {% else %}
                <i class="bi bi-person-circle"></i>
                {% endif %}
            </div>

            <h2 class="coach-name">{{ coach.real_name }}</h2>

            {% if coach.coach_level %}
            <span class="coach-level-badge level-{{ coach.coach_level }}">
                {% if coach.coach_level == 'senior' %}高级教练
                {% elif coach.coach_level == 'middle' %}中级教练
                {% elif coach.coach_level == 'junior' %}初级教练
                {% endif %}
            </span>
            {% endif %}

            {% if coach.hourly_rate %}
            <div class="rate-display">{{ coach.hourly_rate }}元/小时</div>
            {% endif %}

            <div class="coach-info-item">
                <i class="bi bi-telephone"></i>
                <span class="label">手机：</span>
                <span class="value">{{ coach.phone }}</span>
            </div>

            {% if coach.email %}
            <div class="coach-info-item">
                <i class="bi bi-envelope"></i>
                <span class="label">邮箱：</span>
                <span class="value">{{ coach.email }}</span>
            </div>
            {% endif %}

            <div class="coach-info-item">
                <i class="bi bi-geo-alt"></i>
                <span class="label">校区：</span>
                <span class="value">{{ coach.campus.name if coach.campus else '未分配' }}</span>
            </div>

            {% if coach.gender or coach.age %}
            <div class="coach-info-item">
                <i class="bi bi-person"></i>
                <span class="label">基本：</span>
                <span class="value">
                    {% if coach.gender %}{{ '男' if coach.gender == 'male' else '女' }}{% endif %}
                    {% if coach.age %}{% if coach.gender %}，{% endif %}{{ coach.age }}岁{% endif %}
                </span>
            </div>
            {% endif %}

            <div class="coach-info-item">
                <i class="bi bi-flag"></i>
                <span class="label">状态：</span>
                <span class="value">
                    <span class="status-badge status-{{ coach.status }}">
                        {% if coach.status == 'active' %}在职
                        {% elif coach.status == 'pending' %}待审核
                        {% elif coach.status == 'inactive' %}离职
                        {% endif %}
                    </span>
                </span>
            </div>

            <div class="coach-info-item">
                <i class="bi bi-calendar"></i>
                <span class="label">注册：</span>
                <span class="value">{{ coach.created_at.strftime('%Y年%m月%d日') if coach.created_at else '未知' }}</span>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="content-area">
            <!-- 统计数据 -->
            <div class="stats-grid">
                <div class="stat-card students">
                    <div class="stat-icon students">
                        <i class="bi bi-people"></i>
                    </div>
                    <h3 class="stat-number">{{ statistics.total_students }}</h3>
                    <div class="stat-label">指导学员</div>
                    {% if statistics.pending_students > 0 %}
                    <div class="stat-sublabel">待审核：{{ statistics.pending_students }}人</div>
                    {% endif %}
                </div>

                <div class="stat-card revenue">
                    <div class="stat-icon revenue">
                        <i class="bi bi-currency-yen"></i>
                    </div>
                    <h3 class="stat-number">{{ statistics.month_revenue }}</h3>
                    <div class="stat-label">本月收入（元）</div>
                    <div class="stat-sublabel">本周：{{ statistics.week_revenue }}元</div>
                </div>

                <div class="stat-card hours">
                    <div class="stat-icon hours">
                        <i class="bi bi-clock"></i>
                    </div>
                    <h3 class="stat-number">{{ statistics.total_hours }}</h3>
                    <div class="stat-label">累计课时</div>
                    <div class="stat-sublabel">本月：{{ statistics.month_reservations }}节课</div>
                </div>

                <div class="stat-card rating">
                    <div class="stat-icon rating">
                        <i class="bi bi-star-fill"></i>
                    </div>
                    <h3 class="stat-number">{{ statistics.avg_rating }}</h3>
                    <div class="stat-label">平均评分</div>
                    <div class="stat-sublabel">{{ statistics.total_reviews }}条评价</div>
                </div>
            </div>

            <!-- 个人简介 -->
            {% if coach.bio %}
            <div class="content-card">
                <h5 class="card-title">
                    <i class="bi bi-person-lines-fill"></i>个人简介
                </h5>
                <div class="bio-text">{{ coach.bio }}</div>
            </div>
            {% endif %}

            <!-- 教学经验 -->
            {% if coach.experience %}
            <div class="content-card">
                <h5 class="card-title">
                    <i class="bi bi-award"></i>教学经验
                </h5>
                <div class="experience-text">{{ coach.experience }}</div>
            </div>
            {% endif %}

            <!-- 指导学员 -->
            <div class="content-card">
                <h5 class="card-title">
                    <i class="bi bi-people"></i>指导学员 ({{ students|length }})
                </h5>
                {% if students %}
                <div class="students-list">
                    {% for relation in students %}
                    <div class="student-item">
                        <div class="student-avatar">
                            {% if relation.student.photo_url %}
                            <img src="{{ relation.student.photo_url }}" alt="{{ relation.student.real_name }}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">
                            {% else %}
                            <i class="bi bi-person" style="color:#6c757d;"></i>
                            {% endif %}
                        </div>
                        <div class="student-info">
                            <div class="student-name">{{ relation.student.real_name }}</div>
                            <div class="student-meta">
                                申请时间：{{ relation.applied_at.strftime('%Y-%m-%d') if relation.applied_at else '未知' }}
                                {% if relation.is_approved() and relation.responded_at %}
                                | 通过时间：{{ relation.responded_at.strftime('%Y-%m-%d') }}
                                {% endif %}
                            </div>
                        </div>
                        <span class="relation-status relation-{{ relation.status }}">
                            {{ relation.get_status_display() }}
                        </span>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center text-muted py-4">
                    <i class="bi bi-person-x" style="font-size: 2rem; opacity: 0.5;"></i>
                    <p class="mt-2">暂无指导学员</p>
                </div>
                {% endif %}
            </div>

            <!-- 最近预约 -->
            <div class="content-card">
                <h5 class="card-title">
                    <i class="bi bi-calendar-event"></i>最近预约 ({{ recent_reservations|length }})
                </h5>
                {% if recent_reservations %}
                <div class="reservation-list">
                    {% for reservation in recent_reservations %}
                    <div class="reservation-item {{ reservation.status }}">
                        <div class="reservation-date">
                            {{ reservation.reservation_date.strftime('%m-%d') if reservation.reservation_date else '未知' }}
                        </div>
                        <div class="reservation-details">
                            <div class="reservation-student">{{ reservation.student.real_name if reservation.student else '未知学员' }}</div>
                            <div class="reservation-time">
                                {{ reservation.start_time.strftime('%H:%M') if reservation.start_time else '' }}-{{ reservation.end_time.strftime('%H:%M') if reservation.end_time else '' }}
                                | {{ reservation.price }}元
                            </div>
                        </div>
                        <span class="reservation-status status-{{ reservation.status }}">
                            {{ reservation.get_status_display() }}
                        </span>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center text-muted py-4">
                    <i class="bi bi-calendar-x" style="font-size: 2rem; opacity: 0.5;"></i>
                    <p class="mt-2">暂无预约记录</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
        <a href="{{ url_for('coaches.list') }}" class="btn btn-secondary btn-action">
            <i class="bi bi-arrow-left me-2"></i>返回列表
        </a>

        {% if coach.status == 'pending' %}
        <a href="{{ url_for('coaches.approve', id=coach.id) }}" class="btn btn-warning btn-action">
            <i class="bi bi-check-circle me-2"></i>审核教练
        </a>
        {% endif %}

        <a href="{{ url_for('coaches.edit', id=coach.id) }}" class="btn btn-primary btn-action">
            <i class="bi bi-pencil me-2"></i>编辑信息
        </a>

        <a href="{{ url_for('coaches.profile', id=coach.id) }}" class="btn btn-info btn-action">
            <i class="bi bi-person-badge me-2"></i>查看档案
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 实时数据刷新功能
    const refreshStats = function() {
        fetch(`/coaches/api/{{ coach.id }}/statistics`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const stats = data.data;

                    // 更新统计数据
                    document.querySelector('.stat-card.students .stat-number').textContent = stats.total_students;
                    document.querySelector('.stat-card.revenue .stat-number').textContent = stats.month_revenue;
                    document.querySelector('.stat-card.hours .stat-number').textContent = stats.total_hours;
                    document.querySelector('.stat-card.rating .stat-number').textContent = stats.avg_rating;

                    // 更新子标签
                    const pendingStudentsEl = document.querySelector('.stat-card.students .stat-sublabel');
                    if (pendingStudentsEl && stats.pending_students > 0) {
                        pendingStudentsEl.textContent = `待审核：${stats.pending_students}人`;
                    }

                    const weekRevenueEl = document.querySelector('.stat-card.revenue .stat-sublabel');
                    if (weekRevenueEl) {
                        weekRevenueEl.textContent = `本周：${stats.week_revenue}元`;
                    }

                    const monthReservationsEl = document.querySelector('.stat-card.hours .stat-sublabel');
                    if (monthReservationsEl) {
                        monthReservationsEl.textContent = `本月：${stats.month_reservations}节课`;
                    }

                    const totalReviewsEl = document.querySelector('.stat-card.rating .stat-sublabel');
                    if (totalReviewsEl) {
                        totalReviewsEl.textContent = `${stats.total_reviews}条评价`;
                    }
                }
            })
            .catch(error => console.error('Error fetching stats:', error));
    };

    // 每60秒刷新一次统计数据
    setInterval(refreshStats, 60000);

    // 统计卡片点击效果
    document.querySelectorAll('.stat-card').forEach(card => {
        card.addEventListener('click', function() {
            this.style.transform = 'scale(1.05)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });
});
</script>
{% endblock %}